<!-- 目录内容的锚点 -->
<template>
  <li class="item-content" :anchor="anchor">
    <!-- 关闭了锚点跳转采用js -->
    <a class="a-container" href="Javascript:void(0);" @click="jump(anchor)">
      <span class="catalog-aTag">{{title}}</span>
    </a>
  </li>
</template>

<script>
export default {
  name:'ItemContent',
  data () {
    return {
      // isActive:false
    }
  },
  methods:{
    //采用了动画滚动方案，个人认为更好控制当前选择的目录内容
    jump(domId/**/){
      // 当前窗口正中心位置到指定dom位置的距离
      //页面滚动了的距离
      let height = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop; 
      // console.log(domId)
      //指定dom到页面顶端的距离
      let dom = document.getElementById(domId);
      // let domHeight = dom.offsetTop+60/*由于使用了绝对定位，需要递归求取高度*/;

      function getOffsetTop(el){
        return el.offsetParent
          ? el.offsetTop + getOffsetTop(el.offsetParent)
           : el.offsetTop
      }
      let domHeight=getOffsetTop(dom)-60;//滚动至距离屏幕顶部60px

      /*let domHeight = dom.offsetTop+60*/;
      // console.log('domH',domHeight);
      //滚动距离计算
      var S = Number(height) - Number(domHeight);
      // console.log('S',S);
      //判断上滚还是下滚
      if(S<0){
                //下滚
                S = Math.abs(S);
                window.scrollBy({ top: S, behavior: "smooth" });
            }else if(S==0){
                //不滚
                window.scrollBy({ top: 0, behavior: "smooth" });
            }else{
                //上滚
                S = -S
                window.scrollBy({ top: S, behavior: "smooth" });
            }
            
            // console.log('dom_after',getOffsetTop(dom));
      return false;
    }
    ,
    itemClick(){
      
      return false;
    }
  },
  computed:{
    isActive(){
      //从锚点中提取索引值
      return parseInt(anchor.replace(/[^0-9]/ig, ''))==clickedIndex;
    }
  },
  props:{
    title:{
      type:String,
      default:'title'
    },
    anchor:{
      type:String,
      default:'#'
    },
  }
}
</script>

<style  scoped>
.item-content{
  position: relative;
}
.item-content .catalog-aTag{
  font-size: 14px;
    color: inherit;
    display: inline-block;
    padding: 8px;
    width: 90%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.item-content .a-container{
  display: block;
  position: relative;
  padding: 0 0 0 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  /* width: 90%; */
  /* height: auto; */
}

.item-content:not(:first-child) .a-container{   
  padding-left: 26px;
}
.item-content.catalog-active::before{
    content: "";
    position: absolute;
    top: 4px;
    left: 0;
    margin-top: 7px;
    width: 4px;
    height: 16px;
    background: #1e80ff;
    border-radius: 0 4px 4px 0;
}

.item-content.catalog-active a{
  color:#007fff;
}

.a-container:hover .catalog-aTag{
    background-color: #f7f8fa;
    border-radius: 4px;
}
</style>
